<template>
	<view class="yxyl-nav-container">
		<view class="yxyl-nav-item" v-for="(item, index) in navs" :key="index" @tap="routeHandler(item.targetInfo)">
			<image :src="item.generalNavImage" class="yxyl-nav-item-image" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
import routeUtil from '@/util/routeUtil.js';
export default {
	props: {
		navs: {
			type: Array,
			default: function() {
				return [];
			}
		}
	},	
	methods: {
		routeHandler(e) {
			routeUtil.routeHandler(e);
		}
	}
};
</script>

<style lang="scss" scoped>
.yxyl-nav-container {
	width: 100%;
	display: flex;
	justify-content: center;

	.yxyl-nav-item {
		width: 100%;
		height: 100%;
     padding: 0 10rpx;
		.yxyl-nav-item-image {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
